<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page"/>
<!DOCTYPE html>
<html>
<head>
    <title>Insert title here</title>
    <link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/> <!-- 页面整体布局样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css"/> <!-- 菜单样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen"/> <!-- 焦点图样式定义 -->

    <script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.nivo.slider.pack.js"></script> <!-- 焦点图JS脚本定义 -->

    <style type="text/css">
        form {
            position: relative;
            left: 50px;
        }

        .input_field {
            width: 620px;
            padding: 15px 0px;
        }

        .input_field p {
            position: relative;
            left: 58px;
            margin: 0px 0px;
        }

        .input_field label {
            float: left;
            position: relative;
            top: 3px;
        }

        .input_field input {
            position: relative;
        }

        .input_field span {
            position: relative;
            left: 4px;
            color: #a8abab;
        }

        .input_field .codespan {
            position: relative;
            top: -5px;
            left: 20px;
        }

        .input_field .vicode {
            position: relative;
            top: -6px;
            width: 72px;
        }

        .input_field img {
            position: relative;
            left: 8px;
            width: 72px;
            height: 21px;
        }

        .input_field .imgchange {
            position: relative;
            top: -5px;
            left: 15px;
            width: 72px;
            height: 21px;
        }

        .input_field .sub {
            position: relative;
            left: 58px;
            width: 162px;
        }

        .input_field .toreg {
            float: right;
            position: relative;
            top: 4px;
            right: 308px;
        }
    </style>

    <script type="text/javascript">
        var ctx = "${pageContext.request.contextPath}";

        function showUserName() {
            var name = "${user.username}";
            if (name != "") {
                $("#login").html(name);
                $("#exitP").show();
                $("#login").attr("href", ctx + "/user?flag=info&userId=${user.userId}");
            } else {
                $("#login").html("登录");
                $("#exitP").hide();
                $("#login").attr("href", ctx + "/user?flag=login");
            }
        }
    </script>
</head>

<body>
<div id="templatemo_body_wrapper">
    <div id="templatemo_wrapper">

        <!-- header -->
        <div id="templatemo_header">
            <div id="site_title"><h1><a href="">穿美在线鞋城</a></h1></div>
            <div id="header_right">
                <p>
                    <a href="${ctx}/user?flag=login" id="login">登录</a>&nbsp;
                    <span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
                </p>
            </div>
            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_header -->


        <!-- menu -->
        <div id="templatemo_menubar">
            <div id="top_nav" class="ddsmoothmenu">
                <ul>
                    <li><a href="" class="selected">首页</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">我的购物车</a></li>
                    <li><a href="">我的订单</a></li>
                </ul>
                <br style="clear: left"/>
            </div> <!-- end of ddsmoothmenu -->
        </div><!-- END of templatemo_menubar -->


        <!-- main -->
        <div id="templatemo_main">
            <!-- 内容展示区 -->
            <div id="content" class="float_r" style="margin-left:220px;margin-top:20px;">
                <h3>注册</h3>
                <form action="${ctx}/user" method="post" id="regform">
                    <input type="hidden" id="flag" name="flag" value="rs"/>

                    <div class="input_field">
                        <p style="color:red">${message}</p>
                    </div>

                    <div class="input_field">
                        <label for="username">用&nbsp;户&nbsp;&nbsp;名：</label>
                        <input type="text" id="username" name="username" value=""/>
                        <span id="un_msg">2~8个字符，可使用字母、数字、下划线，需以
	字母开头</span>
                    </div>

                    <div class="input_field">
                        <label for="phone">手机号码：</label>
                        <input type="text" id="phone" name="phone" maxLength="11"
                               value=""/>
                        <span id="phone_msg">请输入11位有效手机号码</span>
                    </div>

                    <div class="input_field">
                        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            码：</label>
                        <input type="password" id="password" name="password"
                               value=""/>
                        <span id="pw_msg">6~16个字符，区分大小写</span>
                    </div>

                    <div class="input_field">
                        <label for="confirm">确认密码：</label>
                        <input type="password" id="confirm" name="confirm"
                               value=""/>
                        <span id="confirm_msg">请与密码保持一致</span>
                    </div>

                    <div class="input_field">
                        <label for="vicode">验&nbsp;证&nbsp;&nbsp;码：</label>
                        <input type="text" id="vicode" name="vicode" value=""
                               maxlength="4" class="vicode"/>
                        <img id="imgcode" alt=""
                             src="${ctx}/drawimage?createTypeFlag=nl">
                        <a href="javascript:void(0);" class="imgchange">
                            看不清，换一张</a>
                        <span id="vicd_msg" class="codespan">请输入4位验证码，
	      不区分大小写</span>
                    </div>

                    <div class="input_field">
                        <input type="submit" class="sub" value="注册">
                    </div>
                </form>
            </div>
            <div class="cleaner"></div>
        </div><!-- END of templatemo_main -->


        <!-- footer -->
        <div id="templatemo_footer">
            <p>
                <a href="">首页</a> | <a href="">产品</a> | <a href="">我的购物车</a> | <a href="">我的订单</a>
            </p>
            版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
        </div><!-- END of templatemo_footer -->


    </div><!-- END of templatemo_wrapper -->
</div><!-- END of templatemo_body_wrapper -->


<script type="text/javascript">
    // 校验用户名输入规则
    function chkusername() {
        var name = $("#username").val();
        if (name == null || name.length == 0) {
            $("#un_msg").html("请输入用户名");
            $("#un_msg").css("color", "#f31106");
            return false;
        }
        var regexp = /^[a-zA-Z]{1}[a-zA-Z0-9_]{1,7}$/
        if (!regexp.test(name)) {
            $("#un_msg").html("用户名不符合要求");
            $("#un_msg").css("color", "#f31106");
            return false;
        }
        return true;
    }

    $(function () {
        showUserName();

        $("#username").blur(function () {
            if (chkusername()) {
                $.ajax({
                    url: ctx + "/checkuser",
                    type: "post",
                    data: {"username": $("#username").val()},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == true) {
                            $("#un_msg").html("用户名已存在，不能重复注册");
                            $("#un_msg").css("color", "#f31106");
                            $(".sub").attr("disabled", true);
                        } else {
                            $("#un_msg").html("用户名可以使用");
                            $("#un_msg").css("color", "#1815f3");
                            $(".sub").attr("disabled", false);
                        }
                    }
                });
            }
        });

        $(".imgchange").click(function () {
            $("#imgcode").attr("src", "${ctx}/drawimage?createTypeFlag=nl" + "&date=" + new Date().getTime());
        });

        //$('#slider').nivoSlider();
    });
</script>
<script type="text/javascript" src="${ctx}/js/stock-check.js"></script> <!-- 添加购物车JS脚本定义 -->
</body>
</html>